import React from 'react'
import BScroll from 'better-scroll'
export default class CaseNav extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            Bscroll: '',
        }
    }
    static getDerivedStateFromProps(nextProps){
        return {
            projectCateData: nextProps.projectCateData,
            getProjectDatas: nextProps.getProjectDatas,
            currentNav: nextProps.currentNav
        }
    }
    componentDidMount() {
        const wrapper = document.querySelector('.wrappers')
        //选中DOM中定义的 .wrapper 进行初始化
        const scroll = new BScroll(wrapper, {
            scrollX: true,  //开启横向滚动
            click: true,  // better-scroll 默认会阻止浏览器的原生 click 事件
            scrollY: false, //关闭竖向滚动
        })
    }
    render(){
        return(
            <div className='wrappers'>
                {
                    this.state.projectCateData &&
                    (<ul className='case_nav content' style={{ width: `${2.6 * this.state.projectCateData.length}rem` }}>
                        {
                            this.state.projectCateData.map((item,index) => {
                                return (
                                    <li className={`case_item ${this.state.currentNav === index? 'isShowCase' :''}`} key={index} onClick={() => {this.state.getProjectDatas(item.id,index)}}>{item.category_name}</li>
                                )
                            })
                        }
                    </ul>)
                }

            </div>

        )
    }
}